import React from 'react';

import { Modal, Form, Input, Select } from 'antd';

const { TextArea } = Input;

// 审批操作弹窗
const ApproveModal = ({ form, visible, data = {}, onOk, onCancel, confirmLoading }) => {
    const { title, label, placeholder, required, canReturnList } = data;
    const isReturnAction = !!canReturnList;

    const handleSubmit = () => {
        form.validateFields((err, values) => {
            if (!err) {
                if (onOk) {
                    onOk({ values, title });
                }
            }
        });
    };

    return (
        <Modal
            visible={visible}
            title={title}
            destroyOnClose
            confirmLoading={confirmLoading}
            onOk={() => {
                handleSubmit();
            }}
            onCancel={onCancel}
        >
            <Form labelAlign="right" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
                {isReturnAction && (
                    <Form.Item label="退回节点">
                        {form.getFieldDecorator('targetNode', {
                            rules: [{ required, message: '请选择退回的节点' }]
                        })(
                            <Select placeholder="请选择退回的节点">
                                {canReturnList.map(item => (
                                    <Select.Option key={item.taskDefKey} value={item.taskDefKey}>
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                )}
                <Form.Item label={label} help="2 - 100 个字符">
                    {form.getFieldDecorator('reason', {
                        rules: [
                            { required, message: '2 - 100 个字符' },
                            {
                                min: 2,
                                max: 100,
                                message: '请输入2~100个字符'
                            }
                        ]
                    })(<TextArea placeholder={placeholder} minLength={2} maxLength={100} />)}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create({ name: 'ApproveModal' })(ApproveModal);
